<template>
    <div class="music">
        <h3>Music</h3>
        <div>
            <router-link to="/Home/Music/MusicDetail/1/20">周杰伦</router-link>
            <router-link to="/Home/Music/MusicDetail/2/25">林俊杰</router-link>
            <router-link to="/Home/Music/MusicDetail/3">陈奕迅</router-link>

            <button
                @click="
                    $router.push({
                        name: 'MusicDetail',
                        params: {
                            id: '1',
                            age: '20',
                        },
                    })
                "
            >
                周杰伦
            </button>
            <button
                @click="
                    $router.push({
                        name: 'MusicDetail',
                        params: {
                            id: '2',
                            age: '25',
                        },
                    })
                "
            >
                林俊杰
            </button>
            <button
                @click="
                    $router.push({
                        name: 'MusicDetail',
                        params: {
                            id: '3',
                            age: null,
                        },
                    })
                "
            >
                陈奕迅
            </button>
        </div>
        <!-- 三级路由出口 -->
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: "Music",
    methods() {
        console.log("Music method");
    },
    beforeDestroy() {
        console.log("Music beforedestroy");
    },
};
</script>

<style scoped>
.game {
    background-color: orange;
}
</style>
